<template>
    <div class="page">
        <div class="flexWrap pageTop">
            <div class="flexWrap filter-bar">
                <img src="../../assets/img/filter.png" />
                <span class="title">筛选：</span>
            </div>
            <el-input style="width: 140px; transform:scale(0.9)" size="mini" clearable placeholder="用户姓名/登录名" v-model="filter.username" @change="toFilter"/>
            <el-button v-if="me.isAdmin" type="primary" plain size="mini" style="transform:scale(0.8)" icon="el-icon-circle-plus" @click="toCreate">新增</el-button>
        </div>
        <div class="pageCenter">
            <el-table :data="list" stripe size="small" :cell-style="{padding:'10px 0'}">
                <el-table-column prop="id" label="ID" width="100" />
                <el-table-column prop="name" label="姓名" min-width="140" />
                <el-table-column prop="account" label="登录名" width="160" />
                <el-table-column label="角色" width="160">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.roleStr}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 1"  type="success">正常</el-tag>
                        <el-tag v-else  type="danger">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column v-if="me.isAdmin" label="操作" width="120" >
                    <template slot-scope="scope">
                        <el-button type="text" @click="toEdit(scope.$index, scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--详情页-->
        <el-dialog :visible.sync="edit.show" width="600px" append-to-body border :show-title=false :show-close=false>
            <user-edit v-if="edit.show" :info="edit.info" @complete="edit.show = false; fetchData()" />
        </el-dialog>
    </div>
</template>

<script>
import UserEdit from '@/views/user/components/userEdit'
export default {
    data: function(){
        return {
            me:{},
            filter:{
                username: "",
                status:1, statusAry:[{id:1, name:'激活'},{id:-1, name:'禁用'}],
                role:"",
                roleAry:[
                    {id:1, name:"管理员"},
                    {id:2, name:"经理"},
                    {id:3, name:"产品"},
                    {id:4, name:"开发"},
                    {id:5, name:"测试"},
                    {id:6, name:"协作者"},
                ],
            },

            page:{total:0, size:100, curr:1},
            list:[],

            edit:{show:false, info:{}},
        }
    },
    components: {
        UserEdit,
    },
    created() {
        this.me = this.auth.getAccount();
        let ary = this.me.roles
        if (ary && ary.length > 0) {
            for (let i = 0; i < ary.length; i++) {
                if (ary[i] == 1 || ary[i] == 2) {
                    this.me.isAdmin = true
                    break
                }
            }
        }

        this.fetchData();
    },
    methods: {
        /**************** 动作 ****************/
        pageChanged(v) {
            this.page.curr = v;
            this.fetchData();
        },
        toFilter() {
            this.fetchData()
        },
        toCreate() {
            this.edit = {show:true, info:{}}
        },
        toEdit(index, row) {
            this.edit = {show:true, info:{...row}}
        },

        /**************** 接口 ****************/
        fetchData() {
            let params = {
                pageSize:this.page.size, pageNumber:this.page.curr,
                status:this.filter.status, username:this.filter.username
            }
            this.request.get({
                url: "user.list",
                data: params
            }).then(res => {
                this.list = res.result;
                this.page.total = (res && res.totalCount) ? res.totalCount : this.list.length;

                for(let i = 0; i < this.list.length; i ++) {
                    this.list[i].roleStr = ""
                    let roles = []
                    let ary = this.list[i].roles.split(",")
                    for(let j = 0; j < this.filter.roleAry.length; j ++) {
                        for (let k = 0; k < ary.length; k++) {
                            if (this.filter.roleAry[j].id == ary[k]) {
                                this.list[i].roleStr += this.filter.roleAry[j].name + ","
                                roles.push(this.filter.roleAry[j].id)
                                break
                            }
                        }
                    }
                    this.list[i].roles = roles

                    if (this.list[i].roleStr) {
                        this.list[i].roleStr = this.list[i].roleStr.slice(0, this.list[i].roleStr.length - 1)
                    } else {
                        this.list[i].roleStr= "--"
                    }
                }
            },res => {
                this.$message.error(res.msg || "获取数据失败~");
            })
        }
    }
}
</script>

<style scoped>

</style>
